<template>
  <scroll-view scroll-y class="scroll-container">
 
    <swiper class="swiper" autoplay interval="3000" duration="500">
      <swiper-item>
        <image src="/static/qz1.webp" mode="widthFix" class="swiper-img"></image>
      </swiper-item>
      <swiper-item>
        <image src="/static/qz2.webp" mode="widthFix" class="swiper-img"></image>
      </swiper-item>
      <swiper-item>
        <image src="/static/qz3.webp" mode="widthFix" class="swiper-img"></image>
      </swiper-item>
    </swiper>

    <view class="city-intro">
      <rich-text :nodes="cityIntro"></rich-text>
    </view>

    <view class="progress">
      <text>探索进度：</text>
      <progress percent="60" show-info></progress>
    </view>
    <view class="city-picker">
      <picker mode="region" @change="onRegionChange" :value="region">
        <text>当前选择：{{ region[0] }} - {{ region[1] }} - {{ region[2] }}</text>
      </picker>
    </view>

    <view class="preference">
      <view class="preference-item">
        <text>出行方式：</text>
        <radio-group @change="onTravelModeChange">
          <radio :value="item.value" :checked="item.value === travelMode" v-for="(item, index) in travelModes" :key="index">{{ item.label }}</radio>
        </radio-group>
      </view>
      <view class="preference-item">
        <text>显示推荐景点：</text>
        <switch :checked="showRecommend" @change="onShowRecommendChange"></switch>
      </view>
      <view class="preference-item">
        <text>探索半径：{{ radius }}km</text>
        <slider :value="radius" @change="onRadiusChange" min="1" max="20"></slider>
      </view>
    </view>

    <view class="media">
      <video src="/static/city-video.mp4" controls class="video"></video>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      cityIntro: '<h2>泉州介绍</h2><p>海上丝绸之路起点 - 泉州</p><p><strong>历史文化：</strong>泉州是国务院首批公布的24个历史文化名城之一，是古代“海上丝绸之路”起点，宋元时期被誉为“东方第一大港”。</p><p><strong>著名景点：</strong>清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。</p><p><strong>特色文化：</strong>拥有南音、木偶戏和闽南建筑等丰富的非物质文化遗产。</p>',
      region: ['福建省', '泉州市', '鲤城区'],
      travelModes: [
        { label: '公交', value: 'bus' },
        { label: '自驾', value: 'drive' },
        { label: '步行', value: 'walk' }
      ],
      travelMode: 'bus',
      showRecommend: true,
      radius: 10
    };
  },
  methods: {
    onRegionChange(e) {
      this.region = e.detail.value;
    },
    onTravelModeChange(e) {
      this.travelMode = e.detail.value;
    },
    onShowRecommendChange(e) {
      this.showRecommend = e.detail.value;
    },
    onRadiusChange(e) {
      this.radius = e.detail.value;
    }
  }
};
</script>

<style scoped>
.scroll-container {
  height: 100vh;
}
.swiper {
  height: 300rpx;
}
.swiper-img {
  width: 100%;
  height: 100%;
}
.city-intro {
  padding: 20rpx;
}
.progress {
  padding: 20rpx;
}
.city-picker {
  padding: 20rpx;
}
.preference {
  padding: 20rpx;
}
.preference-item {
  margin-bottom: 20rpx;
}
.media {
  padding: 20rpx;
}
.video {
  width: 100%;
  height: 400rpx;
}
</style>